import React from "react";
import refresh from "@/assets/images/refresh.png";
import "./index.less";

const PayCode = ({
  barcodeRef,
  codeValue,
  qrCodeUrl,
  countdown,
  error,
  onRefresh,
  isRunning
}) => {
  const isInvalid = !isRunning || error;
  console.log(isInvalid,"--isInvalid",error);
  

  return (
    <div className="payment-card">
      <div className="pay">向合作商户付款</div>

      <div style={{ marginTop: 44 }}>
        <div className={`barcode ${isInvalid ? "invalid" : ""}`}>
          <svg ref={barcodeRef}></svg>
          {isInvalid && <div className="invalid-mask"></div>}
        </div>

        <div className="barcode-number">{codeValue}</div>

        <div className={`qr-code ${isInvalid ? "invalid" : ""}`}>
          {qrCodeUrl ? (
            <img src={qrCodeUrl} width={170} height={170} alt="二维码" />
          ) : (
            <></>
          )}
        </div>

        <div className="qr-expiry">
          {isInvalid ? (
            <span className="expired">二维码已经失效，请刷新</span>
          ) : (
            
            isRunning ? <>付款二维码{countdown}秒后失效!</> : <>请点击刷新申请二维码</>
          )}
        </div>

        <div className="refresh-qr" onClick={onRefresh}>
          <img src={refresh} width={14} height={14} alt="" />
          点击刷新二维码
          {/* <div
            className={isInvalid ? "mock-disabled" : "mock-scan"}
            onClick={() => {
              if (isInvalid) return;
              unionayQrExtProcessMember();
            }}
          >
            {"模拟扫码枪"}
          </div> */}
        </div>
      </div>
    </div>
  );
};

export default PayCode;
